<template>
  <div>
    <div class="titleBackgroundColor title-border" :style="{ height:size120,lineHeight:size120 }">
      <div class="n-title-text" :style="{fontSize:size30}">问诊单</div>
    </div>
    <div class="inquiry-title-backgroundColor title-border-right" style="float:left;"  :style="{height: size160, width: size375}" v-on:click="openMySend">
       <div style="float:left;" :style="{marginTop: size60,marginLeft:size65}"><img :src="send" :style="{width:size45,height:size45}" ></img></div>
       <div style="float:left;" :style="{marginLeft: size45,marginTop: size30}">
         <div :style="{fontSize: size20}">我发出的</div>
         <div style="float:left;font-weight: bold;" :style="{fontSize: size45,marginTop: size15}">11</div>
       </div>
    </div>
    <div class="inquiry-title-backgroundColor title-border-right" style="float:left;"  :style="{height: size160, width: size375}">
       <div style="float:left;" :style="{marginTop: size60,marginLeft:size65}"><img :src="get" :style="{width:size45,height:size45}" ></img></div>
       <div style="float:left;" :style="{marginLeft: size45,marginTop: size30}">
         <div :style="{fontSize: size20}">我收到的</div>
         <div style="float:left;font-weight: bold;" :style="{fontSize: size45,marginTop: size15}">5</div>
       </div>
    </div>
    <div :style="{marginTop: size180,marginBottom: size20,fontSize:size20, marginLeft: size20}">系统</div>
    <div class="inquiry-title-backgroundColor title-border" :style="{height: size80}">
      <div class="inquiry-div-border-style" style="text-align:center;color:#A52A2A;float:left;" :style="{height: size30, lineHeight: size30, width:size65, fontSize:size10,marginTop:size25,marginLeft: size10}">默认</div>
      <div style="float:left;" :style="{fontSize:size25,marginTop: size23,marginLeft: size10}">问诊单 (通用)</div>
      <div style="float:right;" :style="{marginTop: size23,marginRight: size10}">
        <img :src="share" :style="{width:size40,height:size40}" ></img>
      </div>
    </div>
    <div class="inquiry-title-backgroundColor" :style="{height: size80}">
      <div style="float:left;" :style="{fontSize:size25,marginTop: size23,marginLeft: size10}">六经辨证问诊单</div>
      <div style="float:right;" :style="{marginTop: size23,marginRight: size10}">
        <img :src="share" :style="{width:size40,height:size40}"></img>
      </div>
    </div>
    <div :style="{marginTop: size25,marginBottom: size20,fontSize:size20, marginLeft: size20, marginRight: size20}">
      <div style="float:left;">自定义</div>
      <div style="float:right;color:#A52A2A" :style="{fontSize:size23}">创建问诊单</div>
      <img style="float:right;" :src="add" :style="{width:size40,height:size40}"></img>
    </div>

    <div class="inquiry-title-backgroundColor" :style="{height:size700, marginTop: size80}" style="text-align: center;">
      <div :style="{paddingTop: size208}">
        <div ><img :src="defaults"></div>
        <div :style="{paddingTop: size40}" style="color:#C0C0C0">还没有创建自定义问诊单</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      send: '../../../static/send.png',
      get: '../../../static/get.png',
      share: '../../../static/share.png',
      add: '../../../static/add.png',
      defaults: '../../../static/default.png'
    }
  },
  mounted () {},
  computed: {
    size10 () {
      return this.clientWidth * 10 / 750 + 'px'
    },
    size15 () {
      return this.clientWidth * 15 / 750 + 'px'
    },
    size20 () {
      return this.clientWidth * 20 / 750 + 'px'
    },
    size23 () {
      return this.clientWidth * 23 / 750 + 'px'
    },
    size25 () {
      return this.clientWidth * 25 / 750 + 'px'
    },
    size30 () {
      return this.clientWidth * 30 / 750 + 'px'
    },
    size40 () {
      return this.clientWidth * 40 / 750 + 'px'
    },
    size45 () {
      return this.clientWidth * 45 / 750 + 'px'
    },
    size50 () {
      return this.clientWidth * 50 / 750 + 'px'
    },
    size65 () {
      return this.clientWidth * 65 / 750 + 'px'
    },
    size60 () {
      return this.clientWidth * 60 / 750 + 'px'
    },
    size80 () {
      return this.clientWidth * 80 / 750 + 'px'
    },
    size100 () {
      return this.clientWidth * 100 / 750 + 'px'
    },
    size120 () {
      return this.clientWidth * 120 / 750 + 'px'
    },
    size160 () {
      return this.clientWidth * 160 / 750 + 'px'
    },
    size180 () {
      return this.clientWidth * 180 / 750 + 'px'
    },
    size208 () {
      return this.clientWidth * 208 / 750 + 'px'
    },
    size375 () {
      return this.clientWidth * 373 / 750 + 'px'
    },
    size700 () {
      return this.clientWidth * 700 / 750 + 'px'
    }
  },
  methods: {
    openMySend () {
      var router = this.$router
      router.push({path: '/mySend', query: { doctorId: 3 }})
    }
  }
}
</script>

<style>
.inquiry-title-backgroundColor{
  background-color: #ffffff
}
.title-border-right {
    border-right: solid 0.5px #E0E0E0;
}
.inquiry-div-border-style{
  border:1px solid #A52A2A
}
</style>
